<template>
  <section class="section-box">
    <div class="header-box ly-border-card">
      <van-nav-bar @click-left="goBack" left-arrow placeholder>
        <template #title>
          <van-tabs v-model:active="activeTabRef" @change="changeTab">
            <van-tab name="organization" title="组织架构" />
            <van-tab name="report" title="汇报关系" />
          </van-tabs>
        </template>
      </van-nav-bar>
      <div class="filter-box">
        <div
          v-for="(item, index) in filterList.slice(0, 2)"
          :key="item.id"
          class="filter-item"
          :class="[
            { 'is-organization': index === 0 },
            {
              active:
                filterType === item.id ||
                (index === 0 && filterSelectVal !== ''),
            },
          ]"
          @click.stop="onChangefilterType(item)"
        >
          {{ item.label }}
        </div>
      </div>
    </div>

    <div class="search-filter ly-border-card">
      <div class="search-flex">
        <CommonSearch
          v-model:search-keyword="searchKeyword"
          v-model:loading="searchLoading"
          style="flex: 1; width: 1px"
          placeholder="搜索组织名称"
          :finished="searchFinished"
          :suggest-list="suggestList"
          @onSearchFn="onSearchFn"
          @onSearchValChange="onSearchValChange"
          @onSelectItem="onSelectItem"
          @onLoadMore="onLoadMore"
        ></CommonSearch>
        <el-select
          v-show="filterType !== 'region'"
          class="filter-select"
          clearable
          v-model="filterSelectVal"
          placeholder="维度"
          style="width: 80px"
          @change="filterSelectChange"
          @clear="filterSelectClear"
        >
          <el-option
            v-for="item in filterList.slice(2)"
            :key="item.id"
            :label="item.label"
            :value="item.id"
          />
        </el-select>
      </div>
      <nav class="nav-box" v-if="navList.length">
        <span
          class="nav-item"
          :class="{ active: index === navList.length - 1 }"
          v-for="(item, index) in navList"
          :key="item.id"
          @click.stop="onClickNavItem(item, index)"
        >
          <span class="nav-name">{{ item.name }}</span>
          <van-icon name="arrow" v-if="index !== navList.length - 1"></van-icon>
        </span>
      </nav>
    </div>
    <footer class="organization-list ly-border-card">
      <header class="organization-header">
        <div class="leader-info">
          <span>总人数：{{ listCount }}</span>
          <span v-if="organizationLeaderInfo" style="margin-left: 20px"
            >负责人：{{ organizationLeaderInfo.leadername }}</span
          >
        </div>
        <div class="organization-checkbox">
          <van-checkbox
            @change="onChangeIsStaff"
            v-model="isStaff"
            shape="square"
            >员工</van-checkbox
          >
          <van-checkbox
            style="margin-left: 10px"
            @change="onChangeIsOffice"
            v-model="isOffice"
            shape="square"
            >职员</van-checkbox
          >
        </div>
      </header>
      <van-skeleton title :row="6" :loading="skeletonLoading">
        <section class="organization-ul hx-scroll">
          <template v-if="organizationList.length">
            <div
              class="li-item"
              :class="{ 'li-item-dashed': item.isdashed }"
              v-for="item in organizationList"
              :key="item.id"
              @click.stop="onSelectOrganizationItem(item)"
            >
              <template v-if="item.otype === 'P'">
                <div class="li-left">
                  <van-image
                    radius="4px"
                    width="100%"
                    height="100%"
                    :src="item.avatar"
                  >
                    <!-- //头像未返回的情形 -->
                    <template v-slot:loading>
                      <span class="placeholder-avatar">{{ item.ename }}</span>
                    </template>
                    <template v-slot:error>
                      <span class="placeholder-avatar">{{ item.ename }}</span>
                    </template>
                  </van-image>
                </div>
                <div class="li-center">
                  <p class="info van-ellipsis">
                    <span>{{ item.name2 }}</span>
                    <span>/</span>
                    <span>{{ item.ename }}</span>
                    <van-tag
                      style="margin-left: 4px"
                      v-if="item.leadername"
                      plain
                      type="primary"
                      >{{ item.leadername }}</van-tag
                    >
                  </p>
                </div>
                <div class="li-right">
                  <van-icon color="#dcdee0" name="arrow" size="14" />
                </div>
              </template>
              <template v-else>
                <div class="li-left">
                  <i
                    class="iconfont"
                    style="font-size: 22px; color: #5aa7ff"
                    :class="`${OrganizationIconMap[item.dimension]}`"
                  ></i>
                </div>
                <div class="li-center">
                  <span v-if="item.levelname" class="li-tag"
                    >{{ item.levelname }}层</span
                  >
                  <p class="info van-ellipsis">
                    <span>{{ item.organizationname }}</span>
                    <span>（{{ item.number }}）</span>
                  </p>
                </div>
                <div
                  class="li-right"
                  :class="{
                    'had-leader-name':
                      item.leadername && item.leadername !== '无负责人',
                  }"
                >
                  <!-- //组织架构维度 || 其他维度有层级标签并且 显示负责人 -->
                  <span
                    @click.stop="jumpToReport(item)"
                    class="leader-box"
                    v-if="isOrganization || (item.levelname && !item.isdashed)"
                  >
                    <i class="iconfont icon-zhutiren"></i>
                    <span style="margin-left: 4px">{{
                      item.leadername ? item.leadername : "无负责人"
                    }}</span>
                    <span v-if="item.zjg">（{{ item.zjg }}）</span>
                  </span>
                  <van-icon color="#dcdee0" name="arrow" size="14" />
                </div>
              </template>
            </div>
          </template>
          <van-empty v-else :description="emptyListMessage || '暂无数据'" />
        </section>
      </van-skeleton>
    </footer>
  </section>
</template>
<script setup>
import {
  ref,
  watch,
  getCurrentInstance,
  computed,
  nextTick,
  onActivated,
  onBeforeUnmount,
  onMounted,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import { usePublicStore } from "@/stores/publicInfo";
const publicStore = usePublicStore();
import { useUserStore } from "@/stores/userInfo";
const userStore = useUserStore();
import {
  ROOT_ID,
  OrganizationCodeMap,
  OrganizationIconMap,
} from "@/utils/organizationConfig";
import CommonSearch from "@/components/CommonSearch.vue";
import sapRequest from "@/api/sapRequest";
import { setTempToken, isAuthenticated } from "@/utils/auth";
const skeletonLoading = ref(true);
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
//当前组织架构节点id
const organizationId = ref("");
//监听页面路由的变化，动态请求list
watch(
  () => route.params.oid,
  async (newId, oldId) => {
    if (!isAuthenticated()) {
      await setTempToken();
    }
    if (newId && newId !== oldId && newId !== organizationId.value) {
      //记录当前url oid
      publicStore.setOrganizationId(newId);
      nextTick(() => {
        //跳转后 清空输入框的值
        searchKeyword.value = "";
        suggestList.value = [];
        //回显对应维度
        let realId = newId;
        const dimensionValues = Object.values(OrganizationCodeMap);
        const dimensionIndex = dimensionValues.indexOf(newId);
        if (dimensionIndex !== -1) {
          realId = ROOT_ID;
          filterType.value = filterList.value[dimensionIndex]["id"];
          initNavList();
        }

        organizationId.value = realId;

        //刷新页面 && 当前组织架构层级不是领益智造根节点
        //查询当前节点 组织架构链路list
        // if (newId != ROOT_ID) {
        //   getOriganizationLink().then((result) => {
        //     if (result.length) {
        //       navList.value = result;
        //     } else {
        //       navList.value = initNavList.value;
        //     }
        //   });
        // }
        getOrganizationList();
      });
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
const activeTabRef = ref("organization");
const filterType = ref("");
const filterList = ref([
  { label: "组织架构", id: "organization" },
  { label: "区域", id: "region" },
  { label: "运营", id: "operation" },
  { label: "职能", id: "function" },
]);
const isOrganization = computed(() => filterType.value === "organization");
const searchKeyword = ref("");
const filterSelectVal = ref("");
function filterSelectChange(val) {
  const item = filterList.value.find((el) => el.id === val);
  if (item) {
    onChangefilterType(item);
  }
}
function filterSelectClear() {
  filterSelectVal.value = "";
  onChangefilterType(filterList.value[0]);
}
const INIT_NAV_LIST = Object.freeze([
  { name: "领益智造", id: ROOT_ID, level: "01" },
]);
const navList = ref([...INIT_NAV_LIST]);
function initNavList() {
  navList.value = [...INIT_NAV_LIST];
}

const isStaff = ref(true);
const isOffice = ref(true);
const organizationList = ref([]);
const organizationLevel = ref("");
const emptyListMessage = ref("暂无数据");
//计算当前列表人数
const listCount = computed(() =>
  organizationList.value.reduce(
    (sum, { otype, number = 0 }) => sum + (otype === "P" ? 1 : number),
    0
  )
);
const organizationLeaderInfo = ref(null);

//点击组织架构链路面包屑
function onClickNavItem(item, index = 0) {
  const { level, id } = item;
  if (index < navList.value.length) {
    navList.value = navList.value.slice(0, index + 1);
  }
  if (level) {
    organizationLevel.value = level;
  }
  changeRouterById(id);
}
//切换组织架构维度
function onChangefilterType(item) {
  //切换维度 清空输入框的值
  searchKeyword.value = "";
  suggestList.value = [];
  //切换维度 重置组织架构链路
  initNavList();
  //切换维度 重置层级
  organizationLevel.value = "";

  //记录当前维度
  filterType.value = item.id;

  //切换到组织架构、区域 清空下拉筛选
  if (["organization", "region"].includes(filterType.value)) {
    filterSelectVal.value = "";
  }
  sessionStorage.setItem("h5-dimension-type", filterType.value);
  const code = OrganizationCodeMap[filterType.value];
  changeRouterById(code);
}

//根据当前url上的组织架构id反查组织架构链路信息
//tip:当前组织架构层级是 《领益智造》 这一级时 不做请求
// function getOriganizationLink() {
//   return new Promise((resolve, reject) => {
//     const params = {
//       IM_SYSID: OrganizationCodeMap[filterType.value],
//       IM_OBJID: organizationId.value,
//       IM_DATE: publicStore.searchDateStr,
//       IM_PAGE: 1,
//       IM_PGNUM: pageSizeRef.value,
//       IM_FLAG: "X", //标记，X表示取组织链路
//     };
//     sapRequest
//       .search(params)
//       .then((res) => {
//         if (Array.isArray(res) && res.length) {
//           resolve(res[0]["data"] || []);
//         } else {
//           resolve([]);
//         }
//       })
//       .catch((error) => {
//         resolve([]);
//       });
//   });
// }

//点击查询按钮
const onSearchFn = proxy.$utils.debounce((searchVal) => {
  if (!searchVal) {
    showToast("请输入查询关键词");
    return;
  }
  showLoadingToast({
    message: "查询中...",
    forbidClick: true,
    duration: 0,
  });
  const params = {
    IM_SYSID: OrganizationCodeMap[filterType.value],
    IM_OBJID: searchKeyword.value,
    IM_DATE: publicStore.searchDateStr,
    IM_PAGE: 1,
    IM_PGNUM: pageSizeRef.value,
  };
  sapRequest
    .search(params)
    .then((res) => {
      if (Array.isArray(res) && res.length) {
        const { result = [] } = res[0];
        if (result.length) {
          const searchResult = result[0]["data"] || [];
          if (searchResult.length) {
            navList.value = searchResult;
            const { id, level } = searchResult[searchResult.length - 1] || {};
            if (!isOrganization.value && level) {
              organizationLevel.value = level;
            }
            if (id) {
              changeRouterById(id);
            }
          } else {
            showToast("查询完毕，但没有匹配到结果。");
          }
        }
      } else {
        showToast("查询完毕，但没有匹配到结果。");
      }
    })
    .catch((error) => {
      showToast(error.message || "查询完毕，但没有匹配到结果。");
    })
    .finally(() => {
      closeToast();
    });
}, 500);
//联想搜索逻辑
const searchLoading = ref(false);
//是否最后一页
const searchFinished = computed(() => {
  return pageNumRef.value >= pageCountRef.value;
});
const pageNumRef = ref(1);
const pageSizeRef = ref(10);
const pageCountRef = ref(0); //总共有多少页
const suggestList = ref([]);
// 输入框变化
async function onSearchValChange(val) {
  if (val === "") {
    suggestList.value = [];
    return;
  }
  suggestList.value = [];
  pageNumRef.value = 1;
  suggestList.value = await handleSearch();
}
//选中对应联想搜索条目
function onSelectItem(item) {
  const { data } = item;
  if (data && data.length) {
    navList.value = data;
    const finalIndex = data.length - 1;
    onClickNavItem(data[finalIndex], finalIndex);
  }
}
// 模糊查询加载更多联想搜索内容
async function onLoadMore() {
  searchLoading.value = true;
  if (!searchFinished.value) {
    const moreData = await handleSearch({ IM_PAGE: ++pageNumRef.value });
    suggestList.value = suggestList.value.concat(moreData);
    nextTick(() => {
      searchLoading.value = false;
    });
  }
}

//模糊查询通用函数
function handleSearch(outerParams = {}) {
  return new Promise((resoleve, reject) => {
    const params = {
      IM_SYSID: OrganizationCodeMap[filterType.value],
      IM_DATE: proxy.$utils.formatDate(new Date(), "yyyyMMdd", true),
      IM_OBJID: searchKeyword.value,
      IM_PAGE: 1,
      IM_PGNUM: 10,
      ...outerParams,
    };
    sapRequest
      .search(params)
      .then((res) => {
        //后台格式是这样 我只能兼容了。。。
        if (Array.isArray(res) && res.length) {
          const { rpage, result } = res[0];
          if (result.length) {
            pageCountRef.value = rpage || 0;
            //这里后台返回的格式，需要前端处理一下
            const finalArray = result.map((el) => {
              return {
                ...el,
                label: Array.isArray(el.data)
                  ? proxy.$utils.highlightText(
                      el.data.map((sub) => sub.name).join(" / "),
                      params.IM_OBJID
                    )
                  : "",
              };
            });
            resoleve(finalArray);
          }
        } else {
          resoleve([]);
        }
      })
      .catch((error) => {
        reject(error);
        console.error(error.message);
      });
  });
}
function onChangeIsStaff(checked) {
  if (!checked && !isOffice.value) {
    showToast("至少勾选一个!");
    isStaff.value = true;
    return;
  }
  setTimeout(() => {
    getOrganizationList();
  }, 500);
}

function onChangeIsOffice(checked) {
  if (!checked && !isStaff.value) {
    showToast("至少勾选一个!");
    isOffice.value = true;
    return;
  }
  setTimeout(() => {
    getOrganizationList();
  }, 500);
}

//获取负责人名称
function getLeaderName() {
  const params = {
    IM_SYSID: "BMFZR",
    IM_DATE: proxy.$utils.formatDate(new Date(), "yyyyMMdd", true),
    IM_OBJID: organizationId.value,
    IM_PERNR: userStore.userid,
  };
  sapRequest
    .search(params)
    .then((res) => {
      if (Array.isArray(res) && res.length) {
        organizationLeaderInfo.value = res[0] || null;
      } else {
        organizationLeaderInfo.value = null;
      }
    })
    .catch((error) => {
      organizationLeaderInfo.value = null;
      console.error(error.message);
    });
}
//请求组织架构list
async function getOrganizationList() {
  showLoadingToast({
    message: "查询中...",
    forbidClick: true,
    duration: 0,
  });
  skeletonLoading.value = true;

  const params = {
    IM_SYSID: OrganizationCodeMap[filterType.value],
    IM_OBJID: removeOrganizationUnderLine(organizationId.value),
    IM_PERNR: userStore.userid,
    IM_PARENT: isOrganization.value
      ? undefined
      : JSON.stringify(
          navList.value.map((el) => {
            return {
              ...el,
              id: removeOrganizationUnderLine(el.id),
              name: removeOrganizationUnderLine(el.name),
            };
          })
        ),
    IM_LEVEL: isOrganization.value
      ? undefined
      : organizationLevel.value || "01", //非组织架构维度 都需要传层级
    IM_DATE: publicStore.searchDateStr,
    IM_ZY: isOffice.value ? "X" : "",
    IM_YG: isStaff.value ? "X" : "",
  };
  // "IM_SYSID": "ZZJG", //系统标识，组织架构
  //   "IM_OBJID": "11000001", //第一级组织架构：传领益智造组织编码；非第一级组织架构：传对应的组织架构id
  // IM_LEVEL: 非组织架构维度 都需要传层级
  //   //    "IM_PERNR": "", //操作人工号
  //   "IM_DATE": "20250311", //查询日期
  //   //    "IM_LANGU": "", //语言，非必填，
  //   "IM_ZY": "", //标记，X表示取职员人数
  //   "IM_YG": "" //标记，X表示取员工人数
  //   // "IM_PAGE": "1", //分页，页数
  //   // "IM_PGNUM": "3" //分页，每页数量
  sapRequest
    .fetchList(params)
    .then((res) => {
      // 查无数据时显示空状态
      if (res.status === "E") {
        emptyListMessage.value = res.message;
        organizationList.value = [];
      } else {
        emptyListMessage.value = "";
        //组织架构维度 不显示曾总信息
        let filterList = [];
        if (isOrganization.value) {
          filterList = (res || []).filter(
            (item) =>
              item.otype !== "P" ||
              (item.otype === "P" && item.pernr !== "10000001")
          );

          // 区域、运营、职能维度 部门人数为0 || 部门名称包含 '冻结' 不显示 || 不显示曾总信息
        } else {
          filterList = (res || []).filter(
            (item) =>
              (item.organizationname.indexOf("冻结") === -1 && item.number) ||
              (item.otype === "P" && item.pernr !== "10000001")
          );
        }
        //人放在组织上面，部门负责人放最上面
        organizationList.value = proxy.$utils.sortBy(filterList, {
          key: "otype",
          desc: true,
        });
        // 获取负责人信息
        getLeaderName();
      }
    })
    .catch((error) => {
      error.message && showFailToast(error.message);
    })
    .finally(() => {
      nextTick(() => {
        closeToast();
        skeletonLoading.value = false;
      });
    });
}
//判断面包屑中是否已有重名的区域名称
function hadSomeOrganization(organizationId, name) {
  return navList.value.some(
    (el) => el.id === organizationId || el.name === name
  );
}

function removeOrganizationUnderLine(organizationName) {
  const index = organizationName.indexOf("_");
  if (index !== -1) {
    return organizationName.slice(0, index);
  } else {
    return organizationName;
  }
}
//点击组织架构的部门负责人 跳转到对应汇报关系
function jumpToReport(item) {
  const { authority, leaderpernr, leadername } = item;
  if (leadername === "" || leadername === "无负责人") return;
  if (authority) {
    if (leaderpernr) {
      router.push({
        path: `/report/${leaderpernr}`,
      });
    } else {
      showFailToast("获取不到负责人工号，无法跳转!");
    }
  } else {
    showToast(
      `您暂无 ${leadername}${leaderpernr ? leaderpernr : ""} 的汇报关系查看权限`
    );
  }
}
//选择组织架构item
function onSelectOrganizationItem(item) {
  const { otype, orgeh, pernr, level, organizationname } = item;
  //组织O 表示组织； P 表示人
  if (otype === "P") {
    if (pernr) {
      // showToast("汇报关系开发中，敬请期待");
      router.push({
        path: `/report/${pernr}`,
      });
    } else {
      showFailToast("获取不到个人工号，无法跳转!");
    }
  } else {
    //存在组织编码 跳转到对应层级
    if (orgeh) {
      //不是组织架构维度
      if (level && !isOrganization.value) {
        organizationLevel.value = level;
      }

      // 兼容区域-境外-巴西这种重名情形 添加 id_level 确保唯一
      let organizationId = orgeh;
      if (hadSomeOrganization(orgeh, organizationname)) {
        organizationId = `${orgeh}_${level}`;
      }
      //前端手动更新面包屑
      const nextNavItem = {
        name: organizationname,
        id: organizationId,
        level,
      };
      navList.value.push(nextNavItem);
      changeRouterById(organizationId);
    } else {
      showToast("该层级下没有更多数据了!");
    }
  }
}
function changeRouterById(id) {
  router.push({
    path: `/organization/${id}`,
  });
}
function goBack() {
  router.go(-1);
}
function changeTab(tabName) {
  const currentReportId = publicStore.currentReportId;
  if (tabName === "report") {
    router.push({
      path: `/report/${currentReportId}`,
    });
  }
}
//页面刷新卸载保存当前组织架构链路
function setNavList() {
  sessionStorage.setItem("h5-organization-nav", JSON.stringify(navList.value));
}
function getNavList() {
  if (sessionStorage.getItem("h5-organization-nav")) {
    navList.value = JSON.parse(sessionStorage.getItem("h5-organization-nav"));
    if (navList.value.length) {
      organizationLevel.value =
        navList.value[navList.value.length - 1]["level"] || "";
    }
  } else {
    initNavList();
  }
  // sessionStorage.removeItem("h5-organization-nav");
}
onBeforeUnmount(() => {
  window.removeEventListener("beforeunload", setNavList);
});
onMounted(() => {
  filterType.value =
    sessionStorage.getItem("h5-dimension-type") || "organization";
  getNavList();
  window.addEventListener("beforeunload", setNavList);
});

onActivated(() => {
  activeTabRef.value = "organization";
});
</script>
<style lang="scss" scoped>
.section-box {
  width: 100%;
  height: 100%;
  // padding: 10px;
  display: flex;
  flex-direction: column;

  .header-box {
    padding: 0px;
    //产品要求 标题居中显示
    :deep(.van-nav-bar .van-nav-bar__title) {
      margin-left: 40%;
    }
  }

  .filter-box {
    display: flex;
    align-items: flex-end;
    background-color: #f8f9fa;
    padding: 4px;

    .filter-item {
      width: 84px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      cursor: pointer;
      font-size: 12px;
      border-radius: 0 0 4px 4px;
      background-color: #fff;

      &.is-organization {
        height: 54px;
        width: 144px;
        line-height: 54px;
        border-radius: 6px 6px 0 0;
        &.active,
        &:hover {
          color: #fff;
          background-color: $skyBlue;
        }
      }

      &.active,
      &:hover {
        background-color: $orange-color;
        color: #ffffff;
      }
    }
    .filter-item + .filter-item {
      margin-left: 10px;
    }
  }

  .search-filter {
    padding: 10px 0;
    overflow: unset;
    margin-top: 10px;
    .search-flex {
      display: flex;
      align-items: center;
      padding: 0 10px;
    }
    .filter-select {
      margin-left: 10px;
    }
    // .search-box {
    //   display: flex;
    //   align-items: center;
    //   .van-search {
    //     flex: 1;
    //     padding-left: 0px;
    //   }
    // }
    .nav-box {
      margin-top: 10px;
      padding: 0 10px;
      .nav-item {
        font-size: 12px;
        line-height: 16px;
        cursor: pointer;
        color: $font-color-tips;
        &.active {
          font-weight: 600;
          color: $font-color-normal;
        }
        &:hover {
          color: $font-color-normal;
        }
        .van-icon-arrow {
          margin-right: 6px;
        }
      }
    }
  }

  .organization-list {
    margin-top: 10px;
    flex: 1;
    height: 1px;
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    .organization-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
      font-size: 12px;
      .leader-info {
        font-weight: 600;
      }
    }
    .organization-checkbox {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .organization-ul {
      margin-top: 10px;
      flex: 1;
      height: 1px;
      overflow-y: auto;
      padding: 0 10px;
      .li-item {
        &.li-item-dashed {
          background-color: #f6fbff;
        }
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        :deep(.van-image) {
          .placeholder-avatar {
            height: 100%;
            width: 100%;
            background-color: #007fff;
            color: #fff;
            font-size: 12px;
            text-align: center;
          }
        }
        .li-left {
          height: 40px;
          width: 40px;
          line-height: 40px;
          text-align: center;
          background-color: #dfefff;
          border-radius: 4px;
          margin-right: 4px;
        }
        .li-center {
          .li-tag {
            width: fit-content;
            display: inline-block;
            padding: 0 2px;
            border-radius: 5px;
            border: 1px solid #dfefff;
            font-size: 10px;
            color: $font-color-tips;
          }
          height: 40px;
          flex: 1;
          width: 1px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
        }
        .li-right {
          display: flex;
          align-items: center;

          &.had-leader-name {
            color: $skyBlue;
            .iconfont {
              color: $skyBlue;
            }
          }

          .leader-box {
            display: flex;
            align-items: center;
            font-size: 12px;
            margin-right: 4px;
          }
        }
      }
    }
  }
}
</style>
